<template>
  <el-dialog title="撤销结款" :close-on-click-modal="false" :visible.sync="visible" fullscreen center :destroy-on-close="true">
		<el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <div>
      <el-table class="miui-table" :data="dataList" border style="margin-bottom: 15px;">
        <el-table-column prop="billId" label="销售单号"></el-table-column>
        <el-table-column prop="createUserName" label="销售人员"></el-table-column>
        <el-table-column prop="originalPrice" label="原价合计"></el-table-column>
        <el-table-column prop="discountPrice" label="折扣金额"></el-table-column>
        <el-table-column prop="removePrice" label="抹零金额"></el-table-column>
        <el-table-column prop="receivablePrice" label="应收金额"></el-table-column>
        <el-table-column prop="paidPrice" label="实缴金额"></el-table-column>
      </el-table>

      <el-divider content-position="center">配镜单商品列表详情</el-divider>
      <el-table :data="saleDetailDTOList" ref="goodsTable" border>
        <el-table-column prop="code" label="商品代码" width="150"></el-table-column>
        <el-table-column prop="goodsDisplayName" label="商品名称"></el-table-column>
        <el-table-column prop="price" label="单价" width="80"></el-table-column>

        <el-table-column prop="goodsQuantity" label="数量" width="50"></el-table-column>
        <el-table-column prop="refundAfterNumber" label="可退货数量" width="100"></el-table-column>
        <el-table-column prop="receivablePrice" label="应收金额" width="120"></el-table-column>
        <el-table-column prop="refundNumber" label="退货数量" width="80"></el-table-column>
        <el-table-column prop="refundPrice" label="退款金额" width="120"></el-table-column>
        <el-table-column prop="goodsDescription" label="商品描述" width="80"></el-table-column>
      </el-table>

      <el-row :gutter="10" style="margin-top: 10px;">
        <el-col :span="8">
          <el-table class="miui-table" :data="recordList" border style="margin-bottom: 15px;">
            <el-table-column prop="method" label="结款类型">
              <template slot-scope="scope"> {{ dataTypeChange(scope.row.method) }} </template>
            </el-table-column>
            <el-table-column prop="totalPrice" label="结款金额"></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="16">
          <el-form label-width="80px" style="margin-bottom: 15px;">
            <el-row style="background-color: #ecf5ff;padding: 5px 10px;">
              <el-col :span="4">
                <el-form-item label="实缴金额">
                  <el-input v-model="paidPrice" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="缴费金额">
                  <el-input v-model="payValue" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4"></el-col>
            </el-row>
          </el-form>
          <payment-form :cardType="cardType" :paymentDataList="paymentDataList" :paidPrice="paidPrice" @refreshFormData="getPaymentValue" :integralBalance="integralBalance"></payment-form>
        </el-col>
      </el-row>


    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="paymentHandle" :loading="ischeck" v-prevent-re-click>退 款</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {fomatFloat} from '@/util/tools'

  import { getCustomerObj } from '@/api/eims/customer'
  import PaymentForm from '@/components/business/Payment'

  // import { getSaleDetail, paymentConduct } from '@/api/eims/cashier/payment'

  import {getCashierRecordObj,saleRefund,cancelPaySale} from '@/api/eims/cashier/refund'
  import {getCustomerInfoObj} from '@/api/eims/customer'
  import { getObjByBillId } from '@/api/eims/optician/glassesinfo'
  import { getSaleDetail} from '@/api/eims/cashier/payment'
  import {getSaleRefundDetailListBySaleId } from '@/api/eims/salerefunddetail'

  export default {
    props:['saleDataList'],
    data() {
      return {
        ischeck: false,
        visible: false,
        saleId: '',
        cardType: '',
        saleDetailList: [],
        dataList: [],
        recordList: [],
        saleDetailDTOList: [],
        refundDetailList: [],
        paymentDataList: [
          {method: '1', name: '现金',button: false, cost: ''},
          {method: '2', name: '积分',button: true, cost: ''},
          {method: '3', name: '储值卡',button: true, cost: '',cardNum: ''},
          {method: '4', name: '银行卡',button: true, cost: ''},
          {method: '5', name: '代金券',button: true, cost: '',vouchersNum: ''},
					{method: '6', name: '预付款',button: true, cost: ''},
					{method: '8', name: '余额支付',button: true, cost: ''},
        ],
        paidPrice: '',
        payInfo: {},
        integralBalance: ''
      }
    },
    components:{
      PaymentForm
    },
    computed: {
      ...mapGetters(['permissions','userInfo','bizData']),
      payValue () {
        let sum = 0
          this.paymentDataList.forEach(item => {
            sum += item.cost*10000/10000
          })

        return sum.toFixed(2)
      }
    },
    methods:{
      // 打开弹窗，初始化数据
      init(data){
        this.visible = true
        this.saleId = data.id
        this.dataList = []
        this.paymentDataList = [
          {method: '1', name: '现金',button: false, cost: '',cashType: '1'},
          {method: '2', name: '积分',button: true, cost: ''},
          {method: '3', name: '储值卡',button: true, cost: '',cardNum: ''},
          {method: '4', name: '银行卡',button: true, cost: '',vouchersNum: ''},
          {method: '5', name: '代金券',button: true, cost: ''},
					{method: '6', name: '预付款',button: true, cost: ''},
					{method: '8', name: '余额支付',button: true, cost: ''},
        ],
        getObjByBillId(data.billId).then(response => {
          if(response.data.code == '0'){
            this.saleDetailDTOList = response.data.data.saleDetailDTOList
            this.saleDetailDTOList.forEach((item,index) => {
              this.$set(this.saleDetailDTOList[index],'refundNumber',item.goodsQuantity)
              let refundPrice = parseFloat(fomatFloat((item.receivablePrice/item.goodsQuantity)*item.refundNumber,2))
              this.saleDetailDTOList[index].refundPrice = refundPrice
              this.$set(this.saleDetailDTOList[index],'refundPrice',refundPrice)
            })
            this.$nextTick(() => {
              getCustomerObj(data.customerId).then(result => {
                if(result.data.code == '0'){
                  this.cardType = result.data.data.cardType
                }else{
                  this.$message.error(result.data.msg)
                }
              })
              this.paidPrice = (data.paidPrice).toFixed(2)
              //this.paymentDataList[0].cost = data.paidPrice
              this.dataList.push(data)
              this.getPaymentRecordList()
            })
            this.getSaleDetailInfo()
            this.getSaleRefundDetailList()
          }else{
            this.$message.error(response.data.msg)
          }

        })
      },
      //  获取缴费记录列表
      getPaymentRecordList() {
        getCashierRecordObj({saleId: this.saleId}).then(response => {
          if(response.data.code == '0'){
            this.recordList = response.data.data
            let integralSum = 0
            this.recordList.forEach((item,index) => {
              if(item.method == '2'){
                integralSum = (integralSum*100 + item.totalPrice*100)/100
              }else{
                for(let i = 0; i < this.paymentDataList.length; i++){
                  if(item.method == this.paymentDataList[i].method){
                    this.paymentDataList[i].cost = this.paymentDataList[i].cost*1 + item.totalPrice*1
                    this.paymentDataList[i].button = false
                    if(item.method == '3'){
                      this.paymentDataList[i].cardNum = item.cardNum
                    }
                    if(item.method == '5'){
                      this.paymentDataList[i].vouchersNum = item.vouchersNum
                    }
                  }
                }
              }
            })
            if(integralSum){
              this.paymentDataList[1].cost = integralSum
              this.paymentDataList[1].button = false
            }
            this.paymentDataList = [...this.paymentDataList]
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      // 退货数量修改
      refundQuantityChangeHandle(data,index){
        let refundPrice = parseFloat(fomatFloat((data.receivablePrice/data.goodsQuantity)*data.refundNumber,2))
        this.$set(this.saleDetailDTOList[index],'refundPrice',refundPrice)
        this.saleDetailDTOList = [...this.saleDetailDTOList]
      },
      //获取配镜单详情
      getSaleDetailInfo(){
        getSaleDetail({saleId: this.saleId}).then(response => {
          if(response.data.code == '0'){
            this.saleDetailList = response.data.data.detailList
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      //获取退货详情
      getSaleRefundDetailList(){
        getSaleRefundDetailListBySaleId(this.saleId).then(response => {
          if(response.data.code == '0'){
            this.refundDetailList = response.data.data
            this.refundDetailList.forEach((item,index) => {
              this.refundDetailList[index].refundPrice = item.price * item.refundNumber
            })
            this.refundDetailList = [...this.refundDetailList]
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      // type-name转换
      dataTypeChange(value) {
        let obj = {}
        obj = this.bizData.paymentTypeData.find(item => {
          if(item.value == value){
            return obj
          }
        })
        if(obj && obj.label){
          return obj.label
        }
      },
      //  获取缴费数据
      getPaymentValue(data) {
        this.payValue = data
      },
      //  表单提交，缴费
      paymentHandle() {
        this.ischeck = true
        if(this.payValue == this.paidPrice) {
          cancelPaySale({id: this.saleId}).then(response => {
            if(response.data.code == '0'){
              this.$message.success('退款成功')
              this.visible = false
              this.$emit('refreshDataList')
            }else{
              this.$message.error(response.data.msg)
            }
            this.ischeck = false
          }).catch(() => {
            this.ischeck = false
          })
        }else{
          this.$message.warning('请核对缴费金额')
          this.ischeck = false
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  table tr td {
    border: solid 1px red;
    padding: 3px 8px;
  }
</style>
